import { Fragment, useState, useEffect } from "react";
import { ShoppingCartOutlined, DeleteOutlined } from "@ant-design/icons";
import index from "./index.css";
import { Drawer, Button } from "antd";
import { Icon } from "@ant-design/compatible";
export default function ShoppingCar(props) {
  const [ifOpen, setIfOpen] = useState(false);
  const [allItemList, setAllItemList] = useState([]);
  const handleOpen = () => {
    setIfOpen(true);
  };
  const handleClose = () => {
    setIfOpen(false);
  };
  //接收数据
  useEffect(() => {
    setAllItemList(props.itemValue);
  }, [props.itemValue]);
  //添加+的逻辑
  const addItemList = (carItemList) => {
    setAllItemList([...allItemList, carItemList.item]);
  };
  //-的逻辑
  const removeItemList = (carItemList) => {
    const updatedList = [...allItemList];
    const index = updatedList.findIndex(
      (item) => JSON.stringify(item) === JSON.stringify(carItemList)
    );
    updatedList.splice(index, 1);
    setAllItemList(updatedList);
  };
  //垃圾桶逻辑
  const deleteItem = (curRowItem) => {
    const nodelCartItems = allItemList.filter(
      (cartItem) => cartItem.id !== curRowItem.id
    );
    setAllItemList(nodelCartItems);
  };
  let itemAllList = [...allItemList];
  let newArr = [...new Set(itemAllList)];
  let finalListData = [];
  newArr.forEach((item) => {
    let count = 0;
    itemAllList.forEach((i) => {
      if (item === i) {
        count++;
      }
    });
    finalListData.push({
      item,
      count,
    });
  });
  const carItem = finalListData.map((element) => {
    if (element) {
      //一个物品在购物车里面的总价
      const totalPrice = element.count * element.item.price;
      return (
        <div className="bigBox">
          <div key={index}>
            <img
              alt=""
              className="picBox"
              src={require("../../../images/products images/" +
                element.item.sku +
                "-1-product.webp")}
            />
          </div>
          <div className="header">
            <div>{element.item.title}</div>
            <div>
              <DeleteOutlined onClick={() => deleteItem(element.item)} />
            </div>
          </div>
          <div className="styleBox">
            × | {element.item.style}
            <div className="priceBox">$ {totalPrice}</div>
          </div>
          <div className="footer">
            <div>Quantity:{element.count}</div>
            <div>
              <Icon type="minus" onClick={() => removeItemList(element.item)} />
              <Icon type="plus" onClick={() => addItemList(element)} />
            </div>
          </div>
        </div>
      );
    }
  });
  const totalPrice = finalListData.reduce((preVal, curVal) => {
    return preVal + curVal.count * curVal.item.price;
  }, 0);

  return (
    <Fragment>
      <div className="ShoppingCar">
        <ShoppingCartOutlined onClick={handleOpen} />
      </div>
      <div>
        <Drawer
          title="Add some products in the cart"
          placement="right"
          onClose={handleClose}
          open={ifOpen}
        >
          <div>{carItem}</div>
          <div className="subTotal">
            <span className="textStyle">
              SUBTOTAL
              <div className="totalPriceBox">$ {totalPrice}</div>
            </span>
            <div>
              <Button className="myBtn">Checkout</Button>
            </div>
          </div>
        </Drawer>
      </div>
    </Fragment>
  );
}
